<template>  
  <view class="container">  
    <!-- 头部模块 -->  
    <view class="header">  
      <image class="bg-image" src="../../../static/ride1.png" mode="aspectFill" />  
    </view>  

    <!-- 信息模块 -->  
    <view class="info">  
	<view class="info-item">

	  <view class="info-text1">{{datalist.title}}</view>     
	</view>
	<!-- <view class="share">  
		    <u-button style="border:none ;" shape="circle" :ripple="true" :hair-line="false" color=" #2980b9" @click="handleClickshare">  
		      <u-icon color="#fff" name="share" size="28" style="margin-right: 10px; color: #fff !important;"></u-icon>  
		      分享  
		    </u-button>  
		  </view> --> 
      <view class="info-item">   
        <text class="info-text1">{{datalist.location}}</text>  
      </view>  
      <view class="info-item">  
        <text class="info-text1">北京市朝阳区工体北路17号1楼(工人体育场北门对...) {{datalist.distance}}</text>  
      </view>  
	  <hr style="border-top: 1px dashed #727272; margin: 20px 0px 20px 0px;">
      <view class="info-item">  
	   <text class="info-text1-1">活动时间</text>  
        <text class="info-text1">{{datalist.time}}</text>  
      </view>  
      
	  <!-- <view class="arrow-right">
	      <u-button shape="circle" :ripple="true" :hair-line="false" color="#2980b9" @click="handleClick1">    
	        等级说明 
	  			<u-icon name="arrow-right" size="28" color="#fff" style="margin-right: 10px;"></u-icon>  
	      </u-button>  
	    </view>  -->
    </view>  
    <!-- 报名人数模块 -->  
    <view class="signup-count">  
      <view class="signup-count-header">  
        <text class="info-label">已报名</text>  
        <text class="info-text">({{datalist.text}})</text>  
      </view>  
       <u-avatar-group
                  :urls="urls"
                  size="75"
                  gap="0.4">
		</u-avatar-group>
    </view>  

    <!-- 组织者模块 -->  
    <view class="organizer">  
      <view class="organizer-item">  
        <text class="info-label">组织方:</text>  
		<view style="width: 200px; height: 50px; display: flex;">
			<view>
				<image src="../../../index.png" style="width: 50px; height: 50px;"></image>
			</view>
			<view style="margin-left: 10px;">
				<text class="info-text">布旅不停</text>  
				<view style="width: 60px; height: 28px; background-color: #696969;border-radius: 50px;">
					<text style="color: #fff; font-size: 15px; display: flex; align-items: center;justify-content: center;">俱乐部</text>
				</view>
			</view>
		</view>
        
      </view>  
      <view class="organizer-item">  
        
		 <view style="display: flex;">
			 <text class="info-label">发布者:</text> 
			<u-avatar :src="src"></u-avatar>
			<text class="info-text" style="margin-left: 10px;">阿伟</text> 
		 </view>
         
      </view>  
	  <view class="phone">
	      <u-button shape="circle" :ripple="true" :hair-line="false" color="#d7ffff" @click="handleClickphone">  
	        <u-icon name="phone" size="28" color="#00aaff" style="margin-right: 10px;"></u-icon>    
	      </u-button>  
	    </view>  
	  <view class="weixin-fill">
	      <u-button shape="circle" :ripple="true" :hair-line="false" color="#d7ffff" @click="handleClickweixin">  
	        <u-icon name="weixin-fill" size="28" color="#00aaff" style="margin-right: 10px;"></u-icon>    
	      </u-button>  
	    </view>  
    </view>  

    <!-- 提示模块 -->  
    <view class="tips">  
      <text class="tips-text">Tips: {{datalist.deadline}} 前可取消报名</text>  
    </view>  

    <!-- 报名模块 -->  
    <view class="signup-module">  
      <button class="btn" @click="GotoEventregistration(datalist)">活动报名</button>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
	data(){
		return {  
			datalist:{  
				activityId:'',
				title: '用烟火气下酒', //标题  
				tag: '', //保险保障  
				location: 'Boskey House | 36.8km', //活动地点  
				distance:'36.8km', //距离  
				time: '05月09日 周四 18:00-20:00', //时间  
				images: [ //图片  
						'https://img.yzcdn.cn/vant/cat.png',  
						'https://img.yzcdn.cn/vant/cat.png',  
						'https://img.yzcdn.cn/vant/cat.png',  
				],  
				text: '12/15', //活动人数  
				name: '',  
				score: '',  
				num: '',  
				free: '', //是否免费  
				type: '萌新-菜鸟', //活动等级  
				btn: '',  
				deadline: '', //活动报名截止时间  
				
				pathId : '',//pathId
			},
			// 头像
			urls: [
                    'https://cdn.uviewui.com/uview/album/1.jpg',
                    'https://cdn.uviewui.com/uview/album/2.jpg',
                    'https://cdn.uviewui.com/uview/album/3.jpg',
                    'https://cdn.uviewui.com/uview/album/4.jpg',
                    'https://cdn.uviewui.com/uview/album/7.jpg',
                    'https://cdn.uviewui.com/uview/album/6.jpg',
                    'https://cdn.uviewui.com/uview/album/5.jpg'
                ],
			src: 'https://cdn.uviewui.com/uview/album/3.jpg',
		};  
	},  
	onLoad() {
		var that = this;  
			//从index页面跳转过来后取值  
			uni.getStorage({  
			key: 'myKey',  
			success: function (res) {  
				
				console.log('读取成功:::'+JSON.stringify(res.data));  
				// //活动
				// that.datalist.activityId = res.data.activityId;  
				// //标题  
				// that.datalist.title = res.data.title;  
				// //是否免费  
				// that.datalist.free = res.data.free;  
				// //活动地点  
				// that.datalist.location = res.data.location;  
				// //活动距离
				// that.datalist.distance = res.data.distance;
				// //活动时间  
				// that.datalist.time = res.data.time;  
				// //活动等级  
				// that.datalist.type = res.data.type;  
				// //活动人数  
				// that.datalist.text = res.data.text;  
				// //活动报名截止时间  
				// that.datalist.deadline = res.data.deadline.slice(0,16);  
				// //距离  
				// that.datalist.distance = res.data.distance;  
				// //距离
				// that.datalist.pathId = res.data.pathId;  
			},  
			fail: function (err) {  
				console.log('读取失败：', err);  
			}  
			});  
	},  
  methods: {  
	   handleClickshare() {  
	        console.log('分享按钮')  
	      }  ,
		  handleClick1() {
		       console.log('等级说明')  
		     }  ,
			 handleClickphone() {
			      console.log('电话')  
			    }  ,
				 handleClickweixin() {
						       console.log('微信')  
						     }  ,

	  GotoEventregistration(datalist){
	  	var that = this;  
	  	//console.log("datalist！！！！"+ JSON.stringify(datalist))  
	  	//存值  
	  	uni.setStorage({  
	  		key: 'detail',  
	  		data: datalist,  
	  		success: function () {  
	  			console.log('存储成功');  
	  			console.log("datalist！！！！"+ JSON.stringify(datalist))  
	  			// 存值成功后进行页面跳转  
	  			uni.navigateTo({  
	  			url: '/pages/detail/detail',  
	  			success: function(){  
	  				console.log('跳转成功');  
	  			}  
	  			});  
	  		},  
	  		fail: function (err) {  
	  			console.log('存储失败：', err);  
	  		}  
	  	});  
	  } 
  }  
}  
</script>  

<style>  
.container {  
  display: flex;  
  flex-direction: column; 
  background-color: #e3e3e3;
}  

.header {  
  display: flex;  
  flex-direction: column;  
  margin-bottom: 20px;  
  background-color: #f7f7f7;    
}  

/* .subtitle {  
background-color: aqua;
  font-size: 18px;  
  color: #666;  
}  */

.bg-image {  
  width: 100%;  
  height: 100px;  
}  

.info {  
  display: flex;  
  flex-direction: column; 
  margin-top: -20px;
  background-color: #2980b9;  
  padding: 20px;
}  

.info-item {  
  display: flex;  
  align-items: center;  
  margin-bottom: 10px;  
}  

.info-label {  
  font-size: 16px;  
  color: #000000;  
  margin-right: 10px;  
}  
.info-text1-1{  
  font-size: 16px;  
  color: #e3e3e3;
	margin-right: 20px;
} 
.info-text1-2{  
  font-size: 16px;  
  color: #e3e3e3;  
  margin-right: 50px;
} 
.info-text1{  
  font-size: 16px;  
  color: #e3e3e3;  
}  

.info-text {  
  font-size: 16px;  
  color: #000000;
}  

.organizer {  
  display: flex;  
  flex-direction: column;  
  width: 80%;
  margin: 0 auto;
  margin-top: -10px;
  margin-bottom: 20px;  
  background-color:#f2f2f2;  
  padding: 20px;  
  border-radius: 10px;  
}  

.organizer-item {  
 
  align-items: center;  
  margin-bottom: 10px;  
}  

.tips {  
  text-align: center;   
}  

.tips-text {  
  font-size: 16px;  
  color: #666;  
}  

.signup-count {  
  display: flex;  
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
  margin-top: -10px;
  margin-bottom: 20px;  
  background-color: #f2f2f2;  
  padding: 20px;  
  border-radius: 10px;  
}  

.signup-count-header {  
  display: flex;  
  align-items: center;  
  margin-bottom: 10px;  
}  

.signup-count-list {  
  position: relative;  
  display: flex;  
  flex-wrap: wrap;  
}  

.signup-count-item {  
  position: relative;  
  width: 40px;  
  height: 40px;  
  margin-left: -20px; /* 重叠的宽度 */  
  z-index: calc(var(--index) * 1); /* 动态设置 z-index */  
}  
/*使用伪类选择器*/
.signup-count-item:nth-child(n) {  
  --index: calc(n - 1); /* 动态设置索引 */  
}

.avatar {  
  width: 40px;  
  height: 40px;  
  border-radius: 50%;  
  background-color: #ccc;  
}

.signup-module {  
  margin-top: 20px;  
}  

.btn {  
  width: 90%;  
  height: 40px;  
  background-color: #2980b9;  
  color: #fff;  
  border-radius: 20px;  
  font-size: 16px;  
  text-align: center;  
  line-height: 40px;  
}  
.share{
	
	width: 70px;
	margin-left: 280px;
	margin-top: -40px;
}
.arrow-right{
	width: 100px;
	margin-left: 260px;
	margin-top: -40px;
}
.phone{
	width: 40px;
	margin-left: 270px;
	margin-top: -30px;
	border-radius: 50%;
}
.weixin-fill{
	width: 40px;
	margin-left: 220px;
	margin-top: -40px;
	border-radius: 50%;
}
</style>